<template>
	<div class="warningInfo-main-left-content scroll-content">

		<div v-for="processItem in data" :key=" processItem.processId">
			<div v-if="processItem.processList.length>0" class="warningInfo-label" :style="`background: linear-gradient(135deg,${machineStates[processItem.state].customColor[0]} 10%,${machineStates[processItem.state].customColor[1]} 100%)`">
				{{ processItem.name === '关机'? '网络异常':processItem.name }} ({{ processItem.count }}台)
			</div>

			<div class="machine-container">
				<div
					v-for="(machineItem, machineIndex) in processItem.processList"
					:key="machineIndex"
					class="machine-item"
				>
					<div class="machine-item-name">{{ machineItem.processName }}</div>
					<div class="machine-item-grid">
						<div
							v-for="(item, ids) in machineItem.machineList"
							:key="ids"
							class="machine-item-card"
							@click="$emit('MachineItem', item)"
						>
							<div class="card-title">{{ item.machineName }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
    import warn from '@/assets/images/warningInfo/contentIcon/warn.png';
    import warn1 from '@/assets/images/warningInfo/contentIcon/warn1.png';
    import warn2 from '@/assets/images/warningInfo/contentIcon/warn2.png';
    import warn3 from '@/assets/images/warningInfo/contentIcon/warn3.png';
    import warn4 from '@/assets/images/warningInfo/contentIcon/warn4.png';
    import warn5 from '@/assets/images/warningInfo/contentIcon/warn5.png';
    import warn6 from '@/assets/images/warningInfo/contentIcon/warn6.png';

    export default {
        props: {
            data: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                machineStates: {
                    '-1': { icon: warn, customColor: ['#D9D9D950', '#ffffff00'] },
                    '2': { icon: warn1, customColor: ['#008A5D50', '#ffffff00'] },
                    '3': { icon: warn2, customColor: ['#9254DE50', '#ffffff00'] },
                    '6': { icon: warn3, customColor: ['#D81E0650', '#ffffff00'] },
                    '4': { icon: warn4, customColor: ['#79554850', '#ffffff00'] },
                    '5': { icon: warn5, customColor: ['#FFC53D50', '#ffffff00'] },
                    '7': { icon: warn6, customColor: ['#1890FF50', '#ffffff00'] }
                }
            };
        }

    };
</script>
<style scoped lang="scss">
@import "../index";

</style>
